<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--<div class="wrapper" style="width:100px;height:100px;background-color:red">
		</div>-->
		<!--<div class="wrapper" style="width:100px;height:100px;background-color:red">
			<div class="content" style="width:50px;width:50px;background-color:green"></div>
		</div>-->
		
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
		
		<script type="text/javascript">
			/*var div = document.getElementsByTagName('div')[0];*/
			/*div.onclick = function(e){
				console.log(e);
				//非IE，IE使用window.Event
			}*/
			
			var wrapper = document.getElementsByClassName('wrapper')[0];
			var content = document.getElementsByClassName('content')[0];
			
			//事件源
			/*wrapper.onclick = function(e){
				var event = e || window.event;//兼容IE
				var target = event.target || event.srcElement;
				console.log(target);
			}*/
			
			/*content.onclick = function(e){
				var event = e || window.event;//兼容IE
				var target = event.target || event.srcElement;
				console.log(target);
			}*/
			
			//事件委托
			var ul = document.getElementsByTagName('ul')[0];
			ul.onclick = function(e){
				var event = e || window.event;
				var target = event.target || event.srcElement;
				console.log(target.innerText);
			}
			
			
			
		</script>
	
	</body>
</html>
